<%--
  Created by IntelliJ IDEA.
  User: apple
  Date: 2022/4/26
  Time: 3:41 下午
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%String path = request.getContextPath()+"/";%>
<!doctype html>
<html>
<head>
    <base href="<%=path%>">
    <title>用户新增/编辑</title>
    <link href="css/bootstrap.min.css?v=3.3.7" rel="stylesheet">
    <link href="css/plugins/switchery/switchery.css" rel="stylesheet">
</head>
<style>
    .error{
        color: red;
        position: absolute;
        line-height:40px;
        right:0px;
    }
</style>
<body style="overflow-x: hidden;">
<form class="form-horizontal" id="objectForm">
    <input type="hidden" name="userId" value="${user.userId}"/>
    <div class="form-group">
        <div class="col-sm-6">
            <label for="userName" class="col-sm-4 control-label">用户名：</label>
            <div class="col-sm-8">
                <input type="text"  class="form-control" id="userName" name="userName" value="${user.userName}" placeholder="用户名">
            </div>
        </div>
        <div class="col-sm-6">
            <label for="deptId" class="col-sm-4 control-label">所属部门</label>
            <div class="col-sm-8">
                <select name="deptId" id="deptId" class="form-control" >
                    <c:forEach items="${depts}" var="dept">
                        <option value="${dept.deptId}" <c:if test="${dept.deptId==user.deptId}">selected</c:if>>${dept.deptName}</option>
                    </c:forEach>
                </select>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-6">
            <label for="moblie" class="col-sm-4 control-label">手机号码</label>
            <div class="col-sm-8">
                <input type="text"  class="form-control" name="moblie" value="${user.moblie}" id="moblie" placeholder="手机号码">
            </div>
        </div>
        <div class="col-sm-6">
            <label for="email" class="col-sm-4 control-label">邮箱</label>
            <div class="col-sm-8">
                <input type="email"  class="form-control" id="email" name="email" value="${user.email}" placeholder="邮箱">
            </div>
        </div>
    </div>
    <c:if test="${ empty user}">
    <div class="form-group">
        <div class="col-sm-6">
            <label for="loginName" class="col-sm-4 control-label">登录账户</label>
            <div class="col-sm-8">
                <input type="text"  class="form-control" id="loginName" name="loginName" value="${user.loginName}" placeholder="登录账户">
            </div>
        </div>
        <div class="col-sm-6">
            <label for="password" class="col-sm-4 control-label">登录密码</label>
            <div class="col-sm-8">
                <input type="password"  class="form-control" id="password" name="password" value="${user.password}" placeholder="登录密码">
            </div>
        </div>
    </div>
    </c:if>
    <div class="form-group">
        <div class="col-sm-6">
            <label for="status" class="col-sm-4 control-label">用户状态</label>
            <div class="col-sm-8">
                <input type="checkbox" name="status" value="0" class="js-switch" <c:if test="${user.status==0}">checked </c:if>/>
            </div>
        </div>
        <div class="col-sm-6">
            <label  class="col-sm-4 control-label">所属角色</label>
            <div class="col-sm-8">
                <select name="roleId" class="form-control">
                    <c:forEach items="${roles}" var="role" >
                        <option value="${role.roleId}" <c:if test="${role.roleId==user.roleId}">selected</c:if>>${role.roleName}</option>
                    </c:forEach>
                </select>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label for="remark" class="col-sm-2 control-label">备注</label>
        <div class="col-sm-10">
            <textarea id="remark" name="remark" class="form-control">${user.remark}</textarea>
        </div>
    </div>
    <div class="form-group" >
        <div class="col-sm-4"></div>
        <div class="col-sm-8" style="align:center">
            <button type="button" class="btn btn-warning" onclick="save();"><i class="glyphicon glyphicon-saved"></i>保存</button>
            <button type="reset" class="btn btn-warning"><i class="glyphicon glyphicon-refresh"></i>重置</button>
        </div>
    </div>
</form>
</body>
<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/bootstrap.min.js?v=3.3.7"></script>
<script src="js/plugins/layer/layer.min.js"></script>
<script src="js/plugins/validate/jquery.validate.min.js"></script>
<script src="js/plugins/validate/messages_zh.min.js"></script>
<!-- Switchery -->
<script src="js/plugins/switchery/switchery.js"></script>
<script src="js/sofwin.js"></script>
<script>
    var elem = document.querySelector('.js-switch');
    var switchery = new Switchery(elem);
    // 给当前form表单添加了表单验证规则
    $("form").validate({
        rules:{
            userName:{
                required:true
            },
            moblie:{
                maxlength:11,
                minlength:11,
                required:true
            },
            email:{
                email:true
            },
            loginName:{
                required:true
            },
            password:{
                required:true
            }
        },
        messages:{
            "userName":{
                required: '用户名不能为空'
            },
            "moblie":{
                required:'手机号码不能为空',
                maxlength:'不能超过11位',
                minlength:'不能小于11位'
            },
            "email":{
                email:'邮箱格式不正确'
            },
            "loginName":{
                required: '登录名不能为空'
            },
            "password":{
                required: '密码不能为空'
            }

        }
    });
    function save(){
        if(!$("form").valid()){
            // true验证规则全部成功
            return;
        }
        $.operator.post('user/save',$("form").serialize());
    }

</script>
</html>
